import React,{Component} from 'react';
import {View,Text,StyleSheet} from 'react-native';
import {Router,Scene,Drawer,Tabs,Stack} from 'react-native-router-flux';
import TabView from './components/tabs/TabView'//tab插件
import DrawerContent from './components/drawer/DrawerContent';//导入抽屉插件
import * as TabIcons from './components/tabicons/Tabicons';
const styles = StyleSheet.create({
	container:{
		flex:1,
		backgroundColor:'transparent',
		justifyContent:'center',
		alignItems:'center',
	},

	tabBarStyle:{
		backgroundColor:'#eee',
		marginTop:20,
		alignItems:'center',
		justifyContent:'center',
	},
	tabBarSelectdItemStyle:{
		backgroundColor:'#ddd',
	}
});
export default class App extends Component{
	render(){
		return (
			<Router>
				<Drawer
					hideNavBar
					key="drawer"
					contentComponent={DrawerContent}
					drawerImage={require('./assets/images/menu_burger.png')}
					drawerWidth={120}
				>
				<Scene hideNavBar panHandlers={null} >
				  <Tabs
				  	tabBarPosition={'bottom'} 
				    key="tabbar"//唯一识别号
				    swipeEnabled={false}//是否可以滑动
				    showLabel={true}//是否显示文字
				    tabBarStyle={styles.tabBarStyle}//设置样式
				    activeBackgroundColor="white"//当选中时候背景颜色
				    inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
				  >
				    <Stack
				    	icon={TabIcons.TabIcon}
				      key="tab_1"
				      title="首页"
				      tabBarLabel="TAB #1"
				      inactiveBackgroundColor="#FFF"
				      activeBackgroundColor="#DDD"
				      navigationBarStyle={{ backgroundColor: 'green' }}
				      titleStyle={{ color: 'white', alignSelf: 'center' }}
				    >
				      <Scene
				        key="tab_1_1"
				        component={TabView}
				        title="Tab #1_1"
				        onRight={() => alert('Right button')}
				        rightTitle="Right"
				      />
				      <Scene
				        key="tab1_2"
				        component={TabView}
				        title="Tab #1_2"
				        back
				        titleStyle={{ color: 'black', alignSelf: 'center' }}
				      />
				    </Stack>

				    <Stack
				      key="tab_2"
				      title="Tab #2"
				      
				      initial
				    >
				      <Scene
				        key="tab_2_1"
				        component={TabView}
				        title="Tab #2_1"
				        renderRightButton={() => <Text>Right</Text>}
				      />
				      <Scene
				        key="tab_2_2"
				        component={TabView}
				        title="Tab #2_2"
				        onBack={() => alert('onBack button!')}
				        hideDrawerButton
				        backTitle="Back!"
				        panHandlers={null}
				      />
				    </Stack>

				    <Stack key="tab_3">
				      <Scene
				        key="tab_3_1"
				        component={TabView}
				        title="Tab #3"
				        rightTitle="Right3"
				        onRight={() => { }}
				      />
				    </Stack>
				    <Scene key="tab_4_1" component={TabView} title="Tab #4" hideNavBar  />
				    <Stack key="tab_5">
				      <Scene key="tab_5_1" component={TabView} title="Tab #5"  />
				    </Stack>
				  </Tabs>
				</Scene>
				</Drawer>
			</Router>
		)
	}
}